<template>
	<view class="goodsSubmitOrder">
		<!-- <view class="send_type">
			<view :class="['send_type_item',curTypeName==item.name?'avtive_type_item':'']"
				v-for="item in send_type_list" :key="item.name" @tap="changeType(item.name)">
				{{item.name}}
			</view>
		</view> -->
		<view class="fn-sz-26 fn-cl-ED8417 mar-bottom-20">温馨提示:请按时前往自提点取货</view>
		<view class="address_box">
			<view class="address_img">
				<image :src="curAddressGetPoint.image" mode=""></image>
			</view>
			<view class="address_info_box">
				<view class="address_info_top_box">
					<view class="fn-sz-30">{{ curAddressGetPoint.name }}</view>
					<view class="fn-sz-26 fn-cl-999999">{{ curAddressGetPoint.distance }}</view>
				</view>
				<view class="fn-sz-26 fn-cl-666666 mar-bottom-20">{{ curAddressGetPoint.full_address }}</view>
				<view class="address_info_bottom_box">
					<view class="call_address" @tap="callPhone">
						<image class="icon-26 mar-right-8" src="../../static/images/icon/icon_call_phone.png" mode="">
						</image>
						<span class="fn-sz-26">联系自提点</span>
					</view>
					<view class="go_address" @tap="goHere">
						<image class="icon-26 mar-right-8" src="../../static/images/icon/icon_gps.png" mode=""></image>
						<span class="fn-sz-26">去这里</span>
					</view>
				</view>
			</view>
		</view>
		<view class="cur_address_box" @tap="goAddress">
			<view class="left_address_box">
				<view class="address_text" v-if="curAddress.province">
					{{ curAddress.province }}{{ curAddress.city }}{{ curAddress.county }}{{curAddress.address}}
					<span v-if="curAddress.num">{{curAddress.num}}</span>
				</view>
				<view class="address_user_info" v-if="curAddress.province">

					<span>
						{{curAddress.fullname}}
					</span>
					<span>
						{{curAddress.phone}}
					</span>
				</view>
				<view class="address_text_tags" v-else>
					请选择地址
				</view>
				<!-- <view class="time_text">
					<span v-if="curAddress.id">
						{{ curAddress.address }}<span
							v-if="curAddress.num">{{curAddress.num}}</span>—{{ curAddress.province }}{{ curAddress.city }}{{ curAddress.county }}
					</span>
				</view>
				<image class="icon-26" src="../../static/images/icon/icon_moer_btn.png" mode=""></image>
				<view class="red_arr_right" v-if="showChooseArr">
					<image src="../../static/images/icon/icon_red_arr.png" mode=""></image>
				</view> -->
			</view>
			<view class="choose_icon">
				<image class="icon-26" src="../../static/images/icon/icon_moer_btn.png" mode=""></image>
			</view>
		</view>
		<view class="choose_get_goods_time">
			<view class="fn-sz-30">是否自提</view>
			<view class="choose_time_box">

				<image class="icon-34" @tap="isSelfGet=false" v-if="isSelfGet"
					src="../../static/images/icon/icon_check_raido_fill.png" mode=""></image>
				<image class="icon-34" @tap="isSelfGet=true" v-else
					src="../../static/images/icon/icon_check_raido_gary.png" mode=""></image>
			</view>
		</view>
		<view class="choose_get_goods_time">
			<view class="fn-sz-30">送货时间</view>
			<view class="choose_time_box" @tap="filterTimeBoxShow = true">
				<view class="time_text">
					<span>{{ cur_time.time }}-{{cur_son_time}}</span>
				</view>
				<image class="icon-26" src="../../static/images/icon/icon_moer_btn.png" mode=""></image>
			</view>
		</view>

		<view class="order_goods_info">
			<view class="fn-sz-30 mar-bottom-30">商品信息</view>
			<view class="order_goods_list">
				<view class="order_goods_item" v-for="item in products_info" :key="item.id">
					<view class="order_goods_img">
						<image :src="item.images[0]" mode=""></image>
					</view>
					<view class="order_goods_item_info">
						<view class="order_goods_item_name">{{ item.name }}</view>
						<view class="order_goods_item_price fn-cl-F34035">
							<span class="fn-sz-22">￥</span>
							<span class="fn-sz-30">{{ item.price }}</span>
						</view>
						<view class="subtotal_box">
							<view class="fn-sz-26 fn-cl-999999">小计：￥{{ item.price * item.num }}</view>
							<view class="fn-sz-26 fn-cl-999999">数量：x{{ item.num }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="smoothly_buy_goods">
			<view class="fn-sz-32 mar-bottom-30 fn-cl-F34035">顺手买一件</view>
			<view class="smoothly_buy_goods_list">
				<GoodsList @submitGetGoods="submitGetGoods" :list="goodsList.lists"></GoodsList>
			</view>
			<u-loadmore :status="loadMoreStatus" v-if="goodsList.lists.length" />
		</view>
		<view class="bottom_submit_btn"><button @tap="createOrder">订单提交</button></view>
		<u-datetime-picker :show="getTimeShow" v-model="getTime" mode="datetime" @cancel="cancelTime"
			:filter="filterDateTime" @confirm="comfirmTime"></u-datetime-picker>
		<u-popup :show="continueSubmitShow" mode="center" @close="continueClose" :round="10">
			<view class="continueSubmitBox">
				<view class="subimit_popup_title">
					温馨提示
				</view>
				<view class="submit_tags">
					{{submitTags}}
				</view>
				<view class="popup_bottom_box">
					<view class="white_btn" @tap="continueClose">
						取消
					</view>
					<view class="yellow_btn" @tap="createOrder('continue')">继续提交</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="errorTagsShow" mode="center" @close="errorTagsClose" :round="10">
			<view class="continueSubmitBox">
				<view class="subimit_popup_title">
					温馨提示
				</view>
				<view class="error_tags">
					{{errorTags}}
				</view>
				<view class="popup_bottom_box">
					<view class="white_btn" @tap="errorTagsClose">
						取消
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="filterTimeBoxShow" mode="bottom" @close="filterTimeClose" :round="10">
			<view class="filter_tiem_box">
				<div class="left_filter_time">
					<view :class="['filter_time_father',cur_time.id==item.id?'avtive_type_item':'']"
						v-for="(item,index) in filterTimeList" :key="index" @tap="cur_time=item">
						{{item.time}}
					</view>
				</div>
				<view class="right_filter_time">
					<scroll-view scroll-y scroll-with-animation class="classify_scroll_box">
						<view class="right_filter_time_list" :key="index">
							<view
								:class="['tiem_son',(cur_time.id==elem.pid&&elem.c_time==cur_son_time)?'avtive_type_item':'']"
								v-for="(elem,index) in cur_time.children" @tap="chooseSonTime(elem.c_time)">
								{{elem.c_time}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import GoodsList from '../../components/goodsList/goodsList.vue';
	import com from '../../mixin';
	export default {
		mixins: [com],
		components: {
			GoodsList
		},
		data() {
			return {
				send_type_list: [{
						name: '自提'
					},
					{
						name: '配送'
					}
				],
				curTypeName: '自提',
				getTimeShow: false,
				getTime: Number(new Date()),
				getTimeText: '',
				products_info: [],
				buyType: '',
				select_product_ids: '',
				curAddress: {},
				continueSubmitShow: false,
				submitTags: '',
				showChooseArr: false,
				errorTagsShow: false,
				errorTags: '',
				filterTimeBoxShow: false,
				filterTimeList: [],
				cur_time: {},
				cur_son_time: '',
				isSelfGet: false
			};
		},
		onLoad(val) {
			this.getTimeText = this.$helper.formatDate(this.getTime, 'yyyy-MM-dd');
			if (val.products_info) {
				this.products_info = JSON.parse(val.products_info);
			} else {
				this.products_info = this.$store.state.shopingCarList;
			}
			this.buyType = val.type;
			this.select_product_ids = this.products_info.map(item => item.id) + '';
			this.getProductList({
				team_id: this.curAddressGetPoint.id,
				with_buy: '1',
				select_product_ids: this.select_product_ids
			});
			this.$api.getMyAddress().then(res => {
				if (res.code == 1) {
					console.log(res, '当前获取地址');
					this.setAddress(res.data.lists[0]);
				}
			})
			this.getTimeSlots();
		},
		onReachBottom() {
			this.getProductList({
				team_id: this.curAddressGetPoint.id,
				with_buy: '1',
				select_product_ids: this.select_product_ids
			});
		},
		methods: {
			...mapMutations(['SET_SHOPING_CAR_LIST']),
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.curAddressGetPoint.mobile
				});
			},
			changeType(val) {
				this.curTypeName = val;
			},
			comfirmTime(val) {
				console.log(val);
				this.getTimeText = this.$helper.formatDate(val.value, 'yyyy-MM-dd hh:mm');
				this.getTimeShow = false;
			},
			filterDateTime(mode, options) {
				let d = new Date()
				// console.log(d.getFullYear());
				if (mode === 'year') {
					return options.filter((option) => option >= d.getFullYear())
				}
				if (mode === 'month') {
					return options.filter((option) => option >= d.getMonth() + 1)
				}
				if (mode === 'minute') {
					return options.filter((option) => option === '00' || option === '30');
				}
				return options;
			},
			cancelTime() {
				this.getTimeShow = false;
			},
			//获取goods组件添加到购物车的商品
			submitGetGoods(goods) {
				let findGoods = this.products_info.find(item => item.id == goods.id);
				if (!findGoods) {
					this.products_info.push(goods);
				}
			},
			createOrder(val) {
				let goods =
					this.products_info.map(item => {
						let ids = item.id + '-' + item.num;
						return ids;
					}) + '';
				let params = {
					team_id: this.curAddressGetPoint.id + '',
					goods,
					get_time: this.cur_time.realTime + ' ' + this.cur_son_time,
					get_type: this.isSelfGet ? '2' : '1'
				};
				if (this.curAddress && this.curAddress.id) {
					params.address_id = this.curAddress.id;
				} else {
					this.$helper.toast('请选择收货地址', 0, 5000);
					this.showChooseArr = true;
					return;
				}
				if (val == 'continue') {
					params.sure = 1;
				}
				this.$api.createOrder(params).then(res => {

					if (res.code == 1) {
						this.$helper.toast(res.msg);
						if (this.buyType == 'car') {
							this.SET_SHOPING_CAR_LIST([]);
						}
						uni.redirectTo({
							url: `/pages/orderPay/orderPay?order_id=${res.data.order_id}`
						});
					} else {
						// console.log(res.msg.indexOf('金额'), 'gagag');

						if (res.msg.indexOf('金额') != -1) {
							this.continueSubmitShow = true;
							this.submitTags = res.msg;
							return;
						} else {
							this.errorTags = res.msg;
							this.errorTagsShow = true;
							return;
						}

					}
				});
			},
			errorTagsClose() {
				this.errorTagsShow = false;
			},
			goHere() {
				let that = this;
				wx.getFuzzyLocation({
					type: 'gcj02', //返回可以用于wx.openLocation的经纬度
					success(res) {
						console.log(res, '获取地址成功', that.$store.getters.cur_address_point.latitude, that.$store
							.getters.cur_address_point.longitude);

						wx.openLocation({
							latitude: that.$store.getters.cur_address_point.latitude * 1, //要去的纬度-地址
							longitude: that.$store.getters.cur_address_point.longitude * 1, //要去的经度-地址
							name: that.$store.getters.cur_address_point.name,
							address: that.$store.getters.cur_address_point.full_address,
							success(rex) {
								console.log('选择地址成功', rex, that, this);
							},
							fail(res) {
								console.log(res, '选择地址失败原因');
							}
						});
					},
					fail(res) {
						that.$helper.toast('定位失败，请打开手机定位再试!');
					}
				});
			},
			goAddress() {
				this.showChooseArr = false;
				uni.navigateTo({
					url: '/pages/integralShop/intergralAddress?pageType=order'
				});
			},
			setAddress(address) {
				this.curAddress = address;
				console.log(this.curAddress, '当前选择地址');
			},
			//关闭继续提交订单模态框
			continueClose() {
				this.continueSubmitShow = false
			},
			getTimeSlots() {
				const now = new Date();
				const days = [];
				const options = {
					month: 'numeric',
					day: 'numeric'
				};

				for (let i = 0; i < 6; i++) {
					const day = new Date(now);
					day.setDate(now.getDate() + i);

					const children = [];
					let startHour = 8;
					let startMinute = 0;

					// 如果是当天，并且当前时间晚于开始时间，则更新开始时间
					if (i === 0) {
						if (now.getHours() >= 8) {
							startHour = now.getHours();
							startMinute = now.getMinutes() < 30 ? 30 : 0;
							if (startMinute === 0) {
								startHour += 1;
							}
						}
					}

					while (startHour < 21 || (startHour === 21 && startMinute === 0)) {
						const start = new Date(day);
						start.setHours(startHour, startMinute);

						startMinute += 30;
						if (startMinute === 60) {
							startMinute = 0;
							startHour += 1;
						}



						const end = new Date(start);
						end.setMinutes(end.getMinutes() + 30);

						const timeSlot = {
							c_time: `${start.getHours()}:${start.getMinutes().toString().padStart(2, '0')}~${end.getHours()}:${end.getMinutes().toString().padStart(2, '0')}`,
							pid: i
						};

						children.push(timeSlot);
					}
					console.log(day, '单光哦爱你个');
					let formattedDay = this.formatToMonthDay(day);
					if (i == 0) {
						formattedDay = `今天(${formattedDay})`
					}
					if (i == 1) {
						formattedDay = `明天(${formattedDay})`
					}
					const realTime = day.toISOString().split('T')[0]; // 获取 yyyy-mm-dd 格式的日期
					days.push({
						time: formattedDay,
						id: i,
						children,
						realTime
					});
				}
				days.forEach((item) => {
					if (item.children.length) {
						item.children.pop()
					}
				})
				this.filterTimeList = days;
				this.cur_time = this.filterTimeList[0];
				console.log(this.filterTimeList, 9999999999)
			},

			filterTimeClose() {
				this.filterTimeBoxShow = false;
				console.log(this.cur_time, 'dnagiang');
				// this.cur_time = {};
				// this.cur_son_time = '';
			},
			formatToMonthDay(dateString) {
				const date = new Date(dateString);
				const month = date.getMonth() + 1; // 月份是从0开始的，所以要加1
				const day = date.getDate();
				return `${month}月${day}日`;
			},
			chooseSonTime(time) {
				this.cur_son_time = time;
				this.filterTimeBoxShow = false;
			}

		}
	};
</script>

<style lang="scss">
	.goodsSubmitOrder {
		background-color: #f9f9f9;
		padding: 24rpx;
		min-height: 100vh;

		.send_type {
			width: 70vw;
			margin: 0 auto;
			border-radius: 40rpx;
			border: 1rpx solid #d5d5d5;
			display: flex;
			overflow: hidden;
			margin-bottom: 30rpx;

			.send_type_item {
				flex: 1;
				text-align: center;
				padding: 20rpx 0;
				border-right: gray;
				font-size: 28rpx;
				background-color: #fff;
			}

			.avtive_type_item {
				background-color: #fed100;
			}
		}

		.address_box {
			padding: 21rpx 23rpx;
			display: flex;
			background: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.address_img {
				flex: none;
				margin-right: 20rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 6rpx;
				}
			}

			.address_info_box {
				flex: 1;

				.address_info_top_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 4rpx;
				}

				.address_info_bottom_box {
					display: flex;
					align-items: center;

					.call_address {
						display: flex;
						align-items: center;
						padding-right: 20rpx;
						border-right: 1rpx solid #f9f9f9;
						margin-right: 20rpx;
					}

					.go_address {
						display: flex;
						align-items: center;
					}
				}
			}
		}

		.cur_address_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 21rpx 23rpx;
			display: flex;
			background: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			font-size: 30rpx;

			.left_address_box {

				.address_text {
					margin-bottom: 30rpx;
				}

				.address_text_tags {}

				.address_user_info {
					span {
						margin-right: 30rpx;
					}
				}
			}

			.choose_icon {}
		}

		.choose_get_goods_time {
			padding: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.address_title {
				flex: none;
				margin-right: 20rpx;
			}

			.choose_time_box {
				display: flex;
				align-items: center;
				position: relative;

				.time_text {
					font-size: 28rpx;
				}

				.red_arr_right {
					width: 80rpx;
					height: 80rpx;
					position: absolute;
					bottom: -76rpx;
					right: -22rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.order_goods_info {
			.order_goods_list {
				.order_goods_item {
					background: #ffffff;
					border-radius: 20rpx;
					padding: 30rpx 24rpx;
					display: flex;
					margin-bottom: 20rpx;

					.order_goods_img {
						margin-right: 18rpx;

						image {
							width: 180rpx;
							height: 180rpx;
							border-radius: 8rpx;
						}
					}

					.order_goods_item_info {
						.order_goods_item_name {
							font-size: 28rpx;
							font-weight: 400;
							color: #222222;
							margin-bottom: 10rpx;
						}

						.order_goods_item_price {
							margin-bottom: 18rpx;
						}

						.subtotal_box {
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}
			}
		}

		.smoothly_buy_goods {
			.smoothly_buy_goods_list {}
		}

		.bottom_submit_btn {
			display: flex;
			align-items: center;
			position: fixed;
			width: 100%;
			height: 100rpx;
			background-color: #ffffff;
			border-top: 1rpx solid #f9f9f9;
			bottom: 0;
			left: 0;
			box-sizing: border-box;
			padding: 0 50rpx;
			justify-content: space-between;

			button {
				flex: 1;
				height: 90rpx;
				background: #fed100;
				border-radius: 45rpx;
				font-size: 30rpx;
				line-height: 90rpx;
			}
		}

		.continueSubmitBox {
			width: 400rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.subimit_popup_title {
				font-size: 30rpx;
				margin-bottom: 40rpx;
				text-align: center;
			}

			.submit_tags {
				margin-bottom: 40rpx;
				font-size: 24rpx;
				text-align: center;
			}

			.error_tags {
				margin-bottom: 40rpx;
				font-size: 24rpx;
				color: gray;
				text-align: center;
			}

			.popup_bottom_box {
				display: flex;
				align-items: center;
				justify-content: center;

				.white_btn {
					width: 180rpx;
					margin-right: 10rpx;
					height: 70rpx;
					line-height: 70rpx;
				}
			}
		}

		.filter_tiem_box {
			display: flex;
			font-size: 30rpx;
			height: 50vh;
			overflow: hidden;
			border-radius: 40rpx;

			.left_filter_time {
				border-right: 1px solid #d5d5d5;

				.filter_time_father {
					border-bottom: 1rpx solid #d5d5d5;
					padding: 20rpx;
					text-align: center;
				}
			}

			.right_filter_time {
				flex: 1;

				.classify_scroll_box {
					height: 50vh;
					flex: none;

					.right_filter_time_list {
						padding: 20rpx;

						.tiem_son {
							text-align: center;
							padding: 20rpx;
							border: 1rpx solid #d5d5d5;
							border-radius: 40rpx;
							margin-bottom: 20rpx;
						}
					}
				}
			}
		}

		.avtive_type_item {
			background-color: #fed100;
		}
	}
</style>